<!--<script setup>-->
<!--import { ref, onMounted, onBeforeUnmount } from 'vue';-->
<!--import axios from 'axios';-->

<!--const accessToken = ref('');-->

<!--const fetchAccessToken = async () => {-->
<!--  try {-->
<!--    // 向后端请求获取 accessToken-->
<!--    const response = await axios.get('http://localhost:8085/token/get-token');-->

<!--    // 假设返回的直接是一个字符串类型的 accessToken-->
<!--    accessToken.value = response.data;-->

<!--    console.log('获取的 accessToken:', accessToken.value);-->
<!--  } catch (error) {-->
<!--    console.error('获取 Token 失败:', error);-->
<!--  }-->
<!--};-->

<!--// 定时器 ID-->
<!--let intervalId = null;-->

<!--onMounted(() => {-->
<!--  // 组件挂载时请求 token-->
<!--  fetchAccessToken();-->

<!--  // 设置定时器，每30分钟（1800000ms）调用一次 fetchAccessToken-->
<!--  intervalId = setInterval(fetchAccessToken, 1800000);  // 30分钟 = 1800000ms-->
<!--});-->

<!--// 组件卸载前清除定时器，避免内存泄漏-->
<!--onBeforeUnmount(() => {-->
<!--  if (intervalId) {-->
<!--    clearInterval(intervalId);-->
<!--  }-->
<!--});-->
<!--</script>-->

<!--<template>-->
<!--  <dv-border-box8>-->
<!--    <div style="width: 100%; height: 100%; padding: 4px;box-sizing: border-box;">-->
<!--      <img src="/img1.png" style="height: 100%; width: 100%;">-->
<!--    </div>-->
<!--  </dv-border-box8>-->
<!--</template>-->
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios';
import EZUIKit from 'ezuikit-js';

const accessToken = ref(null);
const cameraUrl = ref('ezopen://open.ys7.com/L29334649/1.hd.live'); // 替换为实际摄像头 URL
const player = ref(null);

// 获取 accessToken
const fetchAccessToken = async () => {
  try {
    const response = await axios.get('http://localhost:8085/token/get-token');
    accessToken.value = response.data;
  } catch (error) {
    console.error('获取 Token 失败:', error);
  }
};

onMounted(() => {
  fetchAccessToken(); // 组件挂载时请求 token

  const checkAndInitPlayer = () => {
    if (accessToken.value) {
      player.value = new EZUIKit.EZUIKitPlayer({
        id: 'ezuikit-player', // 播放器容器的 id
        url: cameraUrl.value, // 摄像头的 URL
        accessToken: accessToken.value, // 从接口获取的 accessToken
        template: 'standard', // 可选模板类型，具体可以参考文档
      });
      clearInterval(checkIntervalId); // 初始化后清除定时器
    } else {
      setTimeout(checkAndInitPlayer, 1000); // 1秒后重试
    }
  };

  let checkIntervalId = setInterval(checkAndInitPlayer, 1000); // 每1秒检查一次 accessToken 是否已获取
});

onUnmounted(() => {
  if (checkIntervalId) {
    clearInterval(checkIntervalId);
  }
  if (player.value) {
    player.value.destroy(); // 销毁播放器实例
  }
});
</script>

<template>
  <dv-border-box8>
    <div style="width: 100%; height: 100%; padding: 4px;box-sizing: border-box;">
      <!-- 监控画面预览容器 -->
      <div id="ezuikit-player" style="width: 100%; height: 100%;"></div>
    </div>
  </dv-border-box8>
</template>

<style scoped>
/* 可根据需求调整播放器容器的样式 */
#ezuikit-player {
  width: 100%;
  height: 100%;
  background-color: black;
}
</style>